<template>
<div class="uploadAvatar">
    <!-- :before-upload="beforeAvatarUpload"  -->
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="handleChange">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <img v-else :src="headUrl" class="avatar" />
        <el-button class="btn-block" type="primary">
            <slot>上传图片</slot>
        </el-button>
    </el-upload>
</div>
</template>

<script>
export default {
    name: "Upload",
    props: {
        headUrl: {
            type: String,
            default: function () {
                return require("@/assets/404.jpg")
            }
        },
    },
    data() {
        return {
            imgArray: [],
            imageUrl: "",
            dialogVisible: false,
            disabled: false,
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        handleChange(file) {
            if (!this.beforeAvatarUpload(file.raw)) {
                return false
            }
            let img = this.$common.uploadFile(file.raw);
            img
                .then((res) => {
                    if (res.result === "success") {
                        this.imgArray.push(res.data.id);
                        this.imageUrl = res.data.imgUrl;
                        this.$emit("click", this.imgArray);
                        this.$message({
                            message: '上传成功',
                            type: "success",
                        });
                    } else {
                        this.$message({
                            message: res.errorMsg,
                            type: "warning",
                        });
                    }
                })
                .catch((err) => {
                    // this.$message({
                    //   message: err,
                    //   type: "error",
                    // });
                });
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 0.5;
            const isImg = file.type.includes('image');

            if (!isImg) {
                this.$message.error("只能上传图片格式!");
            }

            if (!isLt2M) {
                this.$message.error("只能上传图片格式并且图片大小不能超过 500KB!");
            }
            return isImg && isLt2M;
        },

        handleRemove(file) {
            let imgList = this.$refs["RemovePicture"].uploadFiles;
            let index = imgList.indexOf(file);
            this.imgArray.splice(index, 1);
            this.$emit("click", this.imgArray);
            this.$refs["RemovePicture"].uploadFiles.map((item) => {
                if (item.uid === file.uid) {
                    this.$refs["RemovePicture"].uploadFiles.splice(index, 1);
                }
            });
        },
    },
};
</script>

<style lang="scss">
.uploadAvatar {
    width: 100%;
    height: 400px;

    .btn-block {
        margin-top: 15px;
    }

    .avatar {
        width: 100%;
        max-height: 400px;
        border: 1px solid #ddd;
    }
}
</style>
